<template>
  <div class="dialog-body">
    <div class="form-group">
      <label>预约日期</label>
      <input type="date" :value="formData.date" @input="updateDate($event)" class="form-input" :min="minDate">
    </div>
    <div class="form-group">
      <label>期望送达时间</label>
      <input type="time" :value="formData.time" @input="updateTime($event)" class="form-input">
    </div>
    <div class="form-group">
      <label>购物清单</label>
      <div class="shopping-list">
        <div v-for="(item, index) in formData.items" :key="index" class="shopping-item">
          <input 
            type="text" 
            :value="item.name" 
            @input="updateItemName(index, $event)"
            class="form-input" 
            placeholder="物品名称"
          >
          <input 
            type="number" 
            :value="item.quantity" 
            @input="updateItemQuantity(index, $event)"
            class="form-input" 
            placeholder="数量"
            min="1"
          >
          <button class="remove-btn" @click="removeItem(index)">
            <font-awesome-icon icon="trash" />
          </button>
        </div>
        <button class="add-btn" @click="addItem">
          <font-awesome-icon icon="plus" /> 添加物品
        </button>
      </div>
    </div>
    <div class="form-group">
      <label>备注说明</label>
      <textarea 
        :value="formData.note" 
        @input="updateNote($event)"
        class="form-input" 
        rows="2" 
        placeholder="请详细描述物品的具体要求，如品牌、规格等"
      ></textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShoppingAppointment',
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  computed: {
    minDate() {
      const today = new Date();
      return today.toISOString().split('T')[0];
    }
  },
  methods: {
    updateDate(event) {
      this.$emit('update:formData', {
        ...this.formData,
        date: event.target.value
      });
    },
    updateTime(event) {
      this.$emit('update:formData', {
        ...this.formData,
        time: event.target.value
      });
    },
    updateNote(event) {
      this.$emit('update:formData', {
        ...this.formData,
        note: event.target.value
      });
    },
    updateItemName(index, event) {
      const newItems = [...this.formData.items];
      newItems[index] = {
        ...newItems[index],
        name: event.target.value
      };
      this.$emit('update:formData', {
        ...this.formData,
        items: newItems
      });
    },
    updateItemQuantity(index, event) {
      const newItems = [...this.formData.items];
      newItems[index] = {
        ...newItems[index],
        quantity: parseInt(event.target.value) || 1
      };
      this.$emit('update:formData', {
        ...this.formData,
        items: newItems
      });
    },
    addItem() {
      this.$emit('update:formData', {
        ...this.formData,
        items: [...this.formData.items, { name: '', quantity: 1 }]
      });
    },
    removeItem(index) {
      if (this.formData.items.length === 1) {
        this.$emit('update:formData', {
          ...this.formData,
          items: [{ name: '', quantity: 1 }]
        });
        return;
      }
      const newItems = [...this.formData.items];
      newItems.splice(index, 1);
      this.$emit('update:formData', {
        ...this.formData,
        items: newItems
      });
    },
    validate() {
      const invalidItems = this.formData.items.some(item => !item.name || !item.quantity);
      if (invalidItems) {
        return '请完整填写购物清单';
      }
      return '';
    }
  }
};
</script>

<style scoped>
.shopping-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shopping-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.shopping-item .form-input {
  margin: 0;
}

.shopping-item input[type="number"] {
  width: 100px;
}

.remove-btn {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  padding: 5px;
}

.add-btn {
  margin-top: 10px;
  padding: 8px;
  background: #3498db;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.add-btn:hover {
  background: #409eff;
}
</style> 